<!-- Home.vue -->
<template>
  <div id="HomePage">
    <LoginDlg ref="refLoginDlg" />
    <UserRegDlg ref="refUserRegDlg" />
    <el-container class="frame" style="height: calc(100vh - 30px); display: flex; flex-direction: column;">
      <el-header height="50px">
        <el-row>
          <el-col :span="6">
            <div style="display: flex; justify-content: left; align-items: center">
              <el-avatar src="lgxpainter.ico" />
              <h1
                style="font-family: 隶书; color:darkcyan; font-size: 20px; text-align: left;margin: 0;font-style: italic;">
                LGXPainter-社区版（V0.1.0）</h1>
            </div>
          </el-col>
          <el-col :span="14">
          </el-col>
          <el-col :span="4">
            <div style="display: flex; justify-content: right; align-items: center">
              <el-avatar v-if="login_flag" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              <el-avatar v-if="!login_flag" :icon="UserFilled" />
              <label style="padding-left:0px;left:0px;width: 60px;color: blue;align-items: center">{{ loginName
                }}</label>
              <el-button type="primary" @click="onLogin" style="padding-top:0px;left:0px;width: 60px;"
                :disabled="login_flag">登录</el-button>
              <el-button type="primary" @click="onRegister" style="padding-top:0px;left:0px;width: 60px;"
                v-if="!login_flag">注册</el-button>
              <el-button v-if="login_flag" type="primary" @click="onLogout"
                style="width: 60px; padding-top: 0px;">退出</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <div style="flex: 1; overflow: hidden;">
        <el-container class="mainContainer">
          <el-container>
            <el-aside width="200px" id="toolbox-containerID" class="HomePageLeftBox">
              <div class="MainLeftBox">编辑器入口</div>
              <el-button type="primary" @click="onOpenLocal">打开本地文件</el-button>
              <nav>
                <el-row class="workNav">
                  <router-link to="/viso" class="visoNav">日常办公制图(beta)</router-link>
                </el-row>
              </nav>
              <div class="sideFootBar"></div>
            </el-aside>
            <el-container>
              <el-header
                style="display: flex; justify-content: left; align-items: center; background-color: rgba(149, 173, 206, 1);">
                <div style="line-height: 1.2;">
                  <h1 style="font-family: verdana; color: blue; font-size: 20px; text-align: center;margin: 0;">
                    无需注册，无需登录，支持本地化存储;一站式满足多种作图应用需求;单图最高可达10W级图元;目前支持直接打开dxf、svg文件。</h1>
                  <h1 style="font-family: verdana; color:brown; font-size: 20px; text-align: left;margin: 0;">
                    注：个人网站测试阶段，版本随时更新、数据也可能会随时清理!!!</h1>
                </div>
              </el-header>
              <el-main id="maincontainerID" style="height: 100%;">
                <div style="height: 50%; max-height: 50%;background-color: aqua;">
                  <MyFilePanel ref="refMyFilePanel" />
                </div>
                <div style="height: 50%; max-height: 50%;">
                  <ChartTemplateStore ref="refChartTemplateStore" />
                </div>
              </el-main>
            </el-container>
          </el-container>
          <el-footer class="el-lgx-footer">
            <FooterStatuBar ref="refFooterStatuBar" />
          </el-footer>
        </el-container>
      </div>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex';
const store = useStore();

import { useRouter } from 'vue-router';
const router = useRouter();

import FooterStatuBar from '../components/FooterStatuBar.vue';
const refFooterStatuBar = ref(null)

import ChartTemplateStore from '../components/ChartTemplateStore.vue'
const refChartTemplateStore = ref(null);

import MyFilePanel from '../components/MyFilePanel.vue'
const refMyFilePanel = ref(null);

import LoginDlg from '../components/LoginDlg.vue'
const refLoginDlg = ref(null)

import UserRegDlg from '../components/UserRegDlg.vue'
const refUserRegDlg = ref(null)

const login_flag = ref(false);
const loginName = ref("游客");


onMounted(() => {
  console.log("HomePage onMounted");
  window.refLoginDlg = refLoginDlg;
  window.refUserRegDlg = refUserRegDlg;

  let curentUserID = store.state.uid;
  if (curentUserID && curentUserID.length > 0) {
    login_flag.value = true;
    loginName.value = store.state.name;
  }
  else {
    login_flag.value = false;
  }

  let t = window.refLoginDlg.value;
  if (t) {
    t.setObserver(updateToolState);
  }
})

var updateToolState = function (flag, name) {
  login_flag.value = flag;
  loginName.value = name;
  if (refMyFilePanel.value) {
    refMyFilePanel.value.loadMyFile();
  }
}

var onLogin = function () {
  let t = window.refLoginDlg.value;
  if (t && !t.visible) {
    t.setObserver(updateToolState);
    t.visible = true;
  }
}

var onRegister = function () {
  let t = window.refUserRegDlg.value;
  if (t && !t.visible) {
    t.setObserver(updateToolState);
    t.visible = true;
  }
}

var onLogout = function () {
  store.commit("logout");
  login_flag.value = false;
  loginName.value = "游客";
}

var onOpenLocal = function () {
  console.log('openfile***************');
  const accept = '.lgx,.dxf,.svg,.pat';
  const formatArr = ['application/lgx', 'dxf/dxf', 'svg/svg', 'cad pat/pat'];
  selectFile(accept, formatArr).then(res => {
    const file = res.file;
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
      let imageBase64 = e.target.result;
      const base64String = imageBase64.split(',')[1]; // 将dataURL头部分割掉
      const fileName = file.name;
      const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
      let localFileInfo = { fileName, data: base64String }
      window.gstore.commit("lazyOpenLocalFile", localFileInfo);
      let editorPath = "/viso";
      if (fileExtension == 'svg' || fileExtension == 'dxf') {
        editorPath = "/cad";
      }
      router.push(editorPath);

    };
  })
    .catch((e) => {
      window.$message.error('仅支持' + accept + '格式的图片')
    })
}




var selectFile = function (accept, formatArr) {
  return new Promise((resolve, reject) => {
    const fileInput = document.createElement('input')
    fileInput.type = 'file';
    fileInput.accept = accept;
    fileInput.click();
    fileInput.onchange = function (event) {
      const file = event.target.files[0]
      {
        resolve({ message: true, event, file })
      }
    }
  });
}



defineExpose({
  onLogin,
  onRegister,
  onLogout
});
</script>

<style>
.HomePageLeftBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: top;
  border-radius: 2%;
  border: 4px solid #8fc9d1;
}

.visoNav {
  font-family: verdana;
  color: blue;
  font-size: 20px;
  text-align: center;
  margin: 0;
}

.cadNav {
  font-family: verdana;
  color: rgb(102, 0, 255);
  font-size: 20px;
  text-align: center;
  margin: 0;
}

.xmindNav {
  font-family: verdana;
  color: green;
  font-size: 20px;
  text-align: center;
  margin: 0;
}

.workNav {
  padding-top: 10px;
  padding-bottom: 10px;
}

.MainLeftBox {
  background-color: cadetblue;
  font-size: 20px;
  width: 200px;
  color: blue
}
</style>
